<template>
	<div v-if="items.length > 0" :class="getClassNames">
		<template v-for="item in items" :key="item.codeName">
			<ToolbarGroupItem
				:loading="loading"
				:item="item"
				:slots="slots"
				@itemClick="handleItemClick"
			>
			</ToolbarGroupItem>
		</template>
	</div>
</template>

<script setup lang="ts">
import { toolbarProps } from './toolbar';
import ToolbarGroupItem from './components/toolbar-group-item.vue';
import { IParam } from '@/core';
const props = defineProps(toolbarProps);
const emit = defineEmits(['itemClick']);
const slots = useSlots();
const getClassNames = computed(() => {
	return {
		'app-view-toolbar': true,
		'app-view-toolbar--style2': props.mode === 'STYLE2',
	};
});
const handleItemClick = (tag: string, event: MouseEvent, logic: IParam) => {
	emit('itemClick', tag, event, logic);
};
</script>
